<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>layout 后台大布局 - Layui</title>
  <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
  <link rel="stylesheet" href="swiper-5.4.5/package/css/swiper.css">

  <!-- 自己的css文件 -->
  <link rel="stylesheet" href="css/用户管理.css">

  <!-- 数据文件 -->
  <script src="data/data.js"></script>

  <!-- layui中的js文件 -->
  <script src="layui-v2.5.7/layui/layui.js"></script>

  <!-- swiper.js -->
  <script src="swiper-5.4.5/package/js/swiper.js"></script>

  <!-- jQuery文件 -->
  <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
 
  <!-- 自己的js文件 -->
  <script src="js/后台用户.js"></script>



</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div id="leftNav"></div>
    <div class="layui-logo">图书管理后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          admin
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="登录界面.html">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black" id="left">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">用户管理</a>
          <dl class="layui-nav-child">
            <dd class="heihei"><a href="后台用户.html" target="houtai">后台用户</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">图书管理</a>
          <dl class="layui-nav-child">
            <dd><a href="图书添加.html" target="houtai">图书添加</a></dd>
            <dd><a href="图书查询.html" target="houtai">图书查询</a></dd>
            <dd><a href="热销书展示.html" target="houtai">热销书展示</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body" id="main-body">
    <!-- 内容主体区域 -->
    <div class="main" id="main1">
      <span style="cursor: pointer; color: gray;">用户管理</span> / <span style="cursor: pointer;" >后台用户</span>
            <br><br><br>
            <div class="white">
                <input class="inputSousuo" type="text" placeholder="按用户名搜索">
                <div class="buttonSousuo layui-bg-green" style="display: inline-block;width: 40px;height: 25px;line-height: 25px;text-align: center;"></div>
                <script>
                    $("input:eq(0) + div").html("<i class='layui-icon layui-icon-search' style=' color: white;'></i>  ")
                </script>
                <br><br>
                <div>
                    <input type="button" class="layui-btn  layui-btn-sm" value="新增" onclick="doAdd()">
                    <input type="button" class="layui-btn layui-btn-sm layui-btn-danger" value="删除全部" onclick="doDeleteAll()">
                </div>
                <div>
                    <table class="layui-table">
                        <colgroup>
                          <col width="150">
                          <col width="200">
                          <col>
                        </colgroup>
                        <thead>
                          <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>手机号</th>
                            <th>操作</th>
                          </tr> 
                        </thead>
                        <tbody>
                          
                        </tbody>
                      </table>
                </div>
            </div>
    </div>
    
    <div class="main" id="main2">
      <!-- 内嵌框架 -->
        <iframe src="" frameborder="0" name="houtai" width="100%px" height="800px" scrolling="yes"></iframe>
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
  </div>
</div>
<script>//内嵌框架显示与隐藏
  $("a:eq(4)").click(function(){
          $("#main2").css("display","none");
          $("#main1").css("display","");
  });
  $("a:eq(5)").click(function(){
      $("#main1").css("display","none");
      $("#main2").css("display","");
  });
  // console.log($("a:eq(7)"));
  $("a:eq(7)").click(function(){
    $("#main1").css("display","none");
    $("#main2").css("display","");
  });
  $("a:eq(8)").click(function(){
    $("#main1").css("display","none");
    $("#main2").css("display","");
  });
  $("a:eq(9)").click(function(){
    $("#main1").css("display","none");
    $("#main2").css("display","");
  });
</script>
<script>
//JavaScript代码区域
    layui.use('element', function(){
    var element = layui.element;
    
    });

    layui.use('layer', function(){
    var element = layui.element;
    });

    $(".heihei").click(function(){
        
    });
    $(".xixi").click(function(){
        // $(".main").html("嘻嘻");
    });
</script>
<script>
  window.onresize=function(){
      if(window.innerWidth<700){
        $("#left").css("margin-left","-300px");
        $("#main-body").css("margin-left","-200px");
        $("#leftNav").html('<i class="layui-icon layui-icon-spread-left" style="font-size: 30px; color: #1E9FFF; position:relative;top:13px"></i>');
      }
      if(window.innerWidth>700){
        $("#left").css("margin-left","");
        $("#main-body").css("margin-left","");
        $("#leftNav").html("");
      }
    };
</script>
</body>
</html>
      